<template>
  <el-row>
    <!-- Footer -->
    <footer class="footer text-center text-light pt-4 pb-4">
      <div class="container">
        <div class="row">
          <div class="col-lg-2 col-md-6 mb-4">
            <p class="text-uppercase mb-3">联系我们</p>
            <ul class="list-unstyled">
              <li class="nav-item">
                <el-image :src="require('@/static/picture/qr.jpg')" style="width: 80px; height: 80px"
                          :preview-src-list="[require('@/static/picture/qr.jpg')]"
                >
                  <div slot="placeholder" class="image-slot">
                    二维码加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </li>
            </ul>
          </div>

          <div class="col-lg-2 col-md-6 mb-4">
            <p class="text-uppercase mb-3">项目功能</p>
            <ul class="list-unstyled">
              <li class="nav-item"><a href="javasript:void(0)" class="nav-link">产品预测</a></li>
              <li class="nav-item"><a href="javasript:void(0)" class="nav-link">订单管理</a></li>
              <li class="nav-item"><a href="javasript:void(0)" class="nav-link">订单排产</a></li>
              <li class="nav-item"><a href="javasript:void(0)" class="nav-link">订单排程</a></li>
            </ul>
          </div>

          <div class="col-lg-2 col-md-6 mb-4">
            <p class="text-uppercase mb-3">源码</p>
            <ul class="list-unstyled">
              <li class="nav-item"><a href="https://gitee.com/slsplatform/peanut-web-vue3" target="_blank" class="nav-link">前端源码</a>
              </li>
              <li class="nav-item"><a href="https://gitee.com/slsplatform/peanut-base" target="_blank" class="nav-link">基础配置</a>
              </li>
              <li class="nav-item"><a href="https://gitee.com/slsplatform/peanut-aps" target="_blank" class="nav-link">APS模块</a>
              </li>
              <li class="nav-item"><a href="https://gitee.com/slsplatform/peanut-task" target="_blank" class="nav-link">任务模块</a>
              </li>
            </ul>
          </div>
          <div class="col-lg-2 col-md-6 mb-4">
            <p class="text-uppercase mb-3">依赖资源</p>
            <ul class="list-unstyled">
              <li class="nav-item"><a href="javasript:void(0)" class="nav-link">Mysql8/Redis</a></li>
              <li class="nav-item"><a href="javasript:void(0)" class="nav-link">JDK21/Vue3</a></li>
              <li class="nav-item"><a href="javasript:void(0)" class="nav-link">Nginx</a></li>
            </ul>
          </div>
          <div class="col-lg-2 col-md-12 mb-4 hidden">
            <ul class="list-inline">
              <li class="list-inline-item">
                <a href="javasript:void(0)" class="text-white">
                  <i class="fa-brands fa-facebook-f social-icon"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="javasript:void(0)" class="text-white">
                  <i class="fa-brands fa-x-twitter social-icon"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="javasript:void(0)" class="text-white">
                  <i class="fa-brands fa-linkedin-in social-icon"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="javasript:void(0)" class="text-white">
                  <i class="fab fa-instagram social-icon"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <hr class="my-4 border-light">
        <small class="mb-2">版权所有 ©2024-2025 。<span style="margin:  0 20px"> <span style="color: red; font-size: 19px ;margin:  0 5px">APS</span>高级排产排程系统. </span> <a href="https://beian.miit.gov.cn/">鲁ICP备2024105874号</a></small>
      </div>
    </footer>
  </el-row>
  <!-- END footer -->

</template>

<script setup>

</script>


<style>

a {
  text-decoration: none;
}

.list-unstyled > li {
  margin-bottom: 10px;
}

/* 调整预览图片的最大宽度和高度 */
.el-image-viewer__img {
  max-width: 400px !important;
  max-height: 400px !important;
  object-fit: contain; /* 保证图片内容完整显示在容器内 */
}
</style>